<template>
  <page-header-wrapper>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <a-row type="flex" justify="space-between">
        <a-col>
          <span class="info">{{defultForm.entName}}</span>
        </a-col>
        <a-col>
          <a-button class="btn" @click="back">返回</a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card :bordered="false" title="供应审核信息详情">
      <h3 class="part-title">产品基本信息</h3>
      <div class="pl-40">
        <ul>
          <li class="list-info">
            <span>产品名称：</span>{{ defultForm.productName }}
          </li>
          <li class="list-info">
            <span>产品同义名称：</span>{{ defultForm.productSynonymName }}
          </li>
          <!-- <li class="list-info">
            <span>产品所属行业：</span> -->
          <!-- </li> -->
          <li class="list-info">
            <span>产品类别：</span>
            <span style="color:#000" v-if="defultForm.productOneCategoryName">
              {{ defultForm.productOneCategoryName }}
            </span>
            <span style="color:#000" v-if="defultForm.productSecondCategoryName">
              - {{ defultForm.productSecondCategoryName }}
            </span>
            <span style="color:#000" v-if="defultForm.productThirdCategory">
              {{ defultForm.productThirdCategory }}
            </span>
          </li>
          <li class="list-info">
            <span>产品特征类别：</span>
            <span style="color:#000" v-if="defultForm.productTag==1">重点新产品</span>
            <span style="color:#000" v-if="defultForm.productTag==2">自主查新产品</span>
            <span style="color:#000" v-if="defultForm.productTag==3">专利新产品</span>
            <span style="color:#000" v-if="defultForm.productTag==4">其他</span>
          </li>
          <li class="list-info">
            <span>是否可定制：</span>
            <span style="color:#000" v-if="defultForm.productOem == 2">否</span>
            <span style="color:#000" v-if="defultForm.productOem == 1">是</span>
          </li>
          <li class="list-info">
            <span>上市日期：</span>{{ defultForm.publishDate }}
          </li>
          <li class="list-info">
            <span>价格：</span>
            <span style="color:#000" v-if="defultForm.isInterview == 0">{{ defultForm.price }}元</span>
            <span style="color:#000" v-if="defultForm.isInterview==1">面谈</span>

          </li>
          <li class="list-info">
            <span>供应上限：</span>
            <span style="color:#000" v-if="defultForm.productIslimited == 0">{{ defultForm.productCeiling }}</span>
            <span style="color:#000" v-if="defultForm.productIslimited==1">不限</span>
          </li>
        </ul>
        <div class="picture">
          <span>产品图片：</span>
          <div class="picture-img mt-10" v-for="(item, index) in defultForm.productFile" :key="index">
            <div>
              <img :src=item.fileUrl alt />
            </div>
          </div>
        </div>
        <div class="picture">
          <span>荣誉资质：</span>
          <div class="picture-img mt-10" v-for="(item, index) in defultForm.honorFile" :key="index">
            <div>
              <img :src=item.fileUrl alt />
            </div>
          </div>
        </div>
      </div>
      <h3 class="part-title">产品详情</h3>
      <div class="pl-40">
        <ul>
          <li class="list-info">
            <span>基本参数：</span>
            <!-- {{defultForm.productParam}} -->
            <span v-html="defultForm.productParam"></span>
          </li>
          <li class="list-info">
            <span>详细说明：</span>
            <!-- {{ defultForm.productDetails }} -->
            <span v-html="defultForm.productDetails"></span>
          </li>
        </ul>
      </div>
      <h3 class="part-title">联系方式</h3>
      <div class="pl-40">
        <ul>
          <li class="list-info">
            <span>企业名称：</span>{{ defultForm.entName }}
          </li>
          <li class="list-info">
            <span>企业地址：</span>{{ entList.entAddress }}
          </li>
          <li class="list-info">
            <span>企业网址：</span>{{ entList.webAddress }}
          </li>
          <li class="list-info">
            <span>联系人：</span>{{ defultForm.contacts }}
          </li>
          <li class="list-info">
            <span>手机号码：</span>{{ defultForm.phone }}
          </li>
          <li class="list-info">
            <span>电子邮箱：</span>{{ defultForm.email }}
          </li>
        </ul>
      </div>

      <div v-if="defultForm.auditStatus==3">
        <h3 class="part-title">审核不通过的原因</h3>
        <div class="pl-40">
          <ul>
            <li class="list-info">
              <span>原因：</span>
              {{defultForm.auditRemark}}
            </li>
          </ul>
        </div>
      </div>

      <div v-if="defultForm.auditStatus===1" style="margin-left: 40%; margin-top: 30px">
        <a-button type="primary" @click="success">通过</a-button>
        <a-button type="danger" class="ml-20" @click="showModal">不通过</a-button>
      </div>
      <a-modal v-model="visible" title="审核退回" @ok="handleOk" :width="800">
        <!-- <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="审核不通过原因:">
            <a-textarea v-model="form.desc" style="margin-left: 50px" :auto-size="{ minRows: 7, maxRows: 50 }" />
          </a-form-item>
        </a-form-model> -->
        <a-form-model :model="form" ref="form" :rules="rules">
          <a-form-model-item label="审核不通过原因:" prop="desc">
            <a-textarea v-model="form.desc" :auto-size="{ minRows: 7, maxRows: 50 }" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { GetproductInfo, GetproductAudit, GetentBaseInfo } from '@/api/product.js'
export default {
  data() {
    return {
      productId: '',
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 15 },
      form: {
        desc: '',
      },
      rules: {
        desc: [
          {
            required: true,
            message: '请输入审核不通过原因',
            trigger: 'blur',
          },
        ],
      },
      defultForm: {},
      entList: {},
      entId: '',
    }
  },
  created() {
    // console.log(this.$route.query.id)
    if (this.$route.query.id) {
      this.productId = this.$route.query.id
      this.GetproductInfo()
    }
  },
  mounted() {},
  methods: {
    back() {
      this.$router.back()
    },
    showModal() {
      this.visible = true
    },
    handleOk() {

       let that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
           let auditStatus = 3
          that.GetproductAudit(auditStatus, this.form.desc)
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // this.visible = false
      // let auditStatus = 3
      // this.GetproductAudit(auditStatus, this.form.desc)
      // this.$message.success('审核处理完成！')
      // this.$router.back()
    },
    success() {
      var that = this
      this.$confirm({
        title: '您确定要通过此信息吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          // 点击确定
          let auditStatus = 2
          that.form.desc = ''
          that.GetproductAudit(auditStatus)
          // that.$message.success('审核通过！')
        },
        onCancel() {
          // 点击取消
          console.log('Cancel')
        },
      })
    },
    //获取详情
    GetproductInfo() {
      let _params = {
        id: this.productId,
      }
      GetproductInfo(_params).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.defultForm = res.data
          this.entId = res.data.entId
          this.GetentBaseInfo()
        }
      })
    },
    GetentBaseInfo() {
      let _params = {
        id: this.entId,
      }
      GetentBaseInfo(_params).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.entList = res.data
        }
      })
    },
    // 审核
    GetproductAudit(auditStatus) {
      let _params = {
        productId: this.productId,
        auditRemark: this.form.desc,
        auditStatus,
      }
      GetproductAudit(_params).then((res) => {
        if (res.code == 200) {
          this.$message.success('审核处理完成！')
          setTimeout(() => {
          this.$router.push('/infoVerify/ProveInfo/list')
          }, 500);
        }
      })
    },
  },
  mounted() {
    // console.log(this.$router.params)
  },
}
</script>
<style lang="less" scoped>
.info {
  font-family: 'Arial Negreta', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
}
.part-title {
  position: relative;
  font-weight: bold;
  height: 40px;
  background-color: #f5f7fa;
  padding-left: 10px;
  border-radius: 2px;
  line-height: 40px;
}
.part-title:before {
  content: '';
  height: 4px;
  width: 20px;
  position: absolute;
  bottom: 0;
  left: 24;
  background-color: #298ef5;
}
.picture {
  margin-bottom: 20px;
  display: flex;
  overflow: hidden;
  background-size: cover;
  span {
    color: #909399;
  }
}
.picture-img {
  width: 150px;
}
.picture img {
  // margin-top: 50px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.6s;
}
.picture img:hover {
  transform: scale(1.4);
}
.list-info {
  border-bottom: 1px dashed #ebeef5;
  line-height: 24px;
  padding: 10px 0;
  color: #030303;
  span {
    color: #909399;
  }
}
</style>